<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>拍店任务</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<link rel="stylesheet" href="/styles/reset.css">
<link rel="stylesheet" href="/styles/assignment.css">
</head>
<body>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=5217672f12911ea7711f13e52e6dcff5"></script> 
<!--  <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=2dd47db993e0a1a7efab80749d4e1a98"></script> -->
	<div class="nav clearfix">
		<h2 class="navTitle pull-left">拍店任务</h2>
		<p class="navRecord">
			<img class="recordImg" src="/images/record.png"><a href="/shop/recordd">拍店记录</a>
		</p>
	</div>
	<form action="/shop/upload" method="post" enctype="multipart/form-data" id="form" onsubmit="return copyText()">
		<div class="main">
			<div class="assignment-container clearfix">
				<ul>
					<li class="assignment-dl upload1"><img src="/images/front.png"> <input type="file" name="file_head" class="uploadfrm uploadfrm1" /></li>
					<li class="assignment-dl upload2"><img src="/images/left.png"> <input type="file" name="file_head" class="uploadfrm uploadfrm2" /></li>
					<li class="assignment-dl upload3"><img src="/images/right.png"> <input type="file" name="file_head" class="uploadfrm uploadfrm3" /></li>
					<li class="assignment-dl upload4"><img src="/images/phone.png"> <input type="file" name="file_head" class="uploadfrm uploadfrm4" /></li>
				</ul>
				<div class="clearfloat"></div>
			</div>

			<div class="add-img">
				<p class="add-imgs">添加图片</p>
				<p class="strategy">
					<a href="/shop/reference">攻略</a>
				</p>
			</div>
			<ul class="user-notice">
				<li>1、请在白天光线好时拍摄，注意招牌不要有反光；</li>
				<li>2、请务必横向拍摄；</li>
				<li>3、尽量拍摄完整的店铺照片，照片中不要有行人和车辆等；</li>
				<li>4、请站在店铺前进行定位，务必定位出店铺的准确坐标，不准确会降低审核通过率；</li>
			</ul>
			<ul class="assignment-input">
				<li>
					<p>
						<i>*</i>店主电话:
					</p><input type="text" name="phone" onkeyup="value=value.replace(/[^1234567890-]+/g,'')" placeholder="请输入手机号" maxlength="11" id="test" />
				</li>
				<li>
					<p>
						<i>*</i>定位坐标
					</p> <b></b><input type="hidden" name="positioning" id="ding">
					<input type="hidden" name="jingwei" id="jingwei">
					<div class="locate mapWithout">
						<span>未定位</span><img src="/images/arrow.png">
					</div>
				</li>
			</ul>
		</div>
		<div class="assignment-submit">
			<!-- <form action="" method="post"> -->
			<input type="submit" name="Submit" value="提交" class="submit-btn" />

			<!-- </form> -->
		</div>
	</form>
	<!-- 图片超过8张提示 -->
	<div class="popup-wrap">
		<div class="popup-prompt">
			<dt>
				<img src="/images/wrong.png">
			</dt>
			<dd>图片最多上传8张</dd>
		</div>
	</div>

	<!-- 提交成功 -->
	<div class="popup-wrap-success">
		<div class="popup-success">
			<dt>
				<img src="/images/success.png">
			</dt>
			<dd>提交成功，可到拍店记录页面查看</dd>
		</div>
	</div>

</body>
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/rem.js"></script>

<script type="text/template" id="one">
    <img src="/images/rest.jpg">
    <input type="file" name="file_head" class="uploadfrm"/>
</script>
<script>
	function copyText() {
		var aaa = true;
		if ($(".uploadfrm1").val() == "" || $(".uploadfrm2").val() == "" || $(".uploadfrm3").val() == "" || $(".uploadfrm4").val() == "") {
			// console.log("图片不得为空");   
			$(".popup-wrap dd").html("请至少上传4张图片");
			$('.popup-wrap').show().delay(3000).fadeOut();
			aaa = false

		} else if ($("#test").val() == "") {
			// console.log("电话不得为空");
			$(".popup-wrap dd").html("请输入店主电话");
			$('.popup-wrap').show().delay(3000).fadeOut();
			aaa = false

		} else if ($(".locate span").html() == "未定位") {
			// console.log("未定位");
			$(".popup-wrap dd").html("请定位店铺地址");
			$('.popup-wrap').show().delay(3000).fadeOut();
			aaa = false
		} else {
			$('.popup-wrap-success').show().delay(5000).fadeOut();
			aaa = true;
		}
		
		return aaa;
	}
	$(function() {
		// 图片上传
		$.fn.upload = function(id) {
			this.id = id;
			this.img = this.id.find($("img"));
			this.img_src = this.id.find($("img")).attr("src");
			this.file = this.id.find($(".uploadfrm"));
			
			var that = this;
			this.file.on("change", function() {
				var files = this.files;//获得上传的所有图片
				var reader = new FileReader();//读取本地图片并显示
				var name = files[0].name;
				var fileName = name.substring(name.lastIndexOf(".") + 1).toLowerCase();
				if (fileName != "jpg" && fileName != "jpeg" && fileName != "png" && fileName != "bmp") {
					alert("图片格式不正确！");
					that.img.attr("src", that.img_src)
					return;
				}
				var fileSize = files[0].size;
				var size = fileSize / 1024;
				if (size > 1000000) {
					alert("图片不能大于100M");
					return;
				} else if (size <= 0) {
					alert("图片不能小于0M");
					return;
				}
				
				reader.readAsDataURL(files[0]);//读取第一张图片的地址
				//数据读取完成后改变src地址
				reader.onload = function() {
					var image = new Image();//本地缓存一张图片
					var imgCur_src = this.result;//获取正在上传的图片
					//alert(this.result);
					that.img.attr("src", imgCur_src);//吧刚开始的图片替换成上传的图片                   
				}

			})
		}
		$(".upload1").upload($(".upload1"));
		$(".upload2").upload($(".upload2"));
		$(".upload3").upload($(".upload3"));
		$(".upload4").upload($(".upload4"));
		
		var num = 5;
		$('.add-imgs').click(function() {
			var masterplate = $("#one").html();
			if ($(".assignment-container ul li").length < 8) {
				// i = num;
				// num++;
				$(".assignment-container ul").append("<li class='assignment-dl upload"+num+"'>" + masterplate + "</li>");
				num = num + 1;
				// console.log(num);
				$(".upload5").upload($(".upload5"));
				$(".upload6").upload($(".upload6"));
				$(".upload7").upload($(".upload7"));
				$(".upload8").upload($(".upload8"));
			} else {
				$('.popup-wrap').show().delay(2000).fadeOut();
			}
		});
		
		// 只能输入数字
		$("input[name='phoneTel']").keyup(function() {
			var tmptxt = $(this).val();
			$(this).val(tmptxt.replace(/\D|^0/g, ''));
		}).bind("paste", function() {
			var tmptxt = $(this).val();
			$(this).val(tmptxt.replace(/\D|^0/g, ''));
		}).css("ime-mode", "disabled");
		
		// 电话号码验证 
		$("#test").blur(function() {
			// $("#test").css("background-color","#D6D6FF");
			var tel = $("#test").val();
			var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
			if (reg.test(tel)) {
				// console.log("号码正确~");               
			} else if (tel == "") {
				$(".popup-wrap dd").html("电话号码不能为空");
				$('.popup-wrap').show().delay(3000).fadeOut();
			} else {
				$(".popup-wrap dd").html("电话号码输入有误");
				$('.popup-wrap').show().delay(3000).fadeOut();
			}
			
			// 验证该店铺是否重复
			// $(".popup-wrap dd").html("已有该铺，请换个铺上传");
			// $('.popup-wrap').show().delay(3000).fadeOut(); 
		});
		
		// 定位
		$(".locate").click(function() {
				var map = new AMap.Map('container', {
				resizeEnable : true,
				zoom : 10,
				center : [ 116.480983, 40.0958 ]
			});
			map.plugin('AMap.Geolocation', function() {
				geolocation = new AMap.Geolocation({
					enableHighAccuracy : true,//是否使用高精度定位，默认:true
					timeout : 10000, //超过10秒后停止定位，默认：无穷大
					maximumAge : 0, //定位结果缓存0毫秒，默认：0
					convert : true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
					showButton : true, //显示定位按钮，默认：true
					buttonPosition : 'LB', //定位按钮停靠位置，默认：'LB'，左下角
					buttonOffset : new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
					showMarker : true, //定位成功后在定位到的位置显示点标记，默认：true
					showCircle : true, //定位成功后用圆圈表示定位精度范围，默认：true
					panToLocation : true, //定位成功后将定位到的位置作为地图中心点，默认：true
					zoomToAccuracy : true
				//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				});
				map.addControl(geolocation);
				geolocation.getCurrentPosition();
				AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
				AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
				
				
				
			});
			
			function onComplete(data){
                if(data.formattedAddress == undefined){
                    $(".popup-wrap dd").html("请定位店铺地址");
                    $('.popup-wrap').show().delay(3000).fadeOut();
                } else {       
                	 $("#ding").val(data.formattedAddress);
             		AMap.service('AMap.Geocoder',function(){//回调函数
    				    //实例化Geocoder
    				    geocoder = new AMap.Geocoder({
    				        city: "010"//城市，默认：“全国”
    				    });
    					//地理编码
    		 			geocoder.getLocation(data.formattedAddress, function(status, result) {
    		 			    if (status === 'complete' && result.info === 'OK') {
    		 			        //TODO:获得了有效经纬度，可以做一些展示工作
    		 			        //比如在获得的经纬度上打上一个Marker
    		 			        $("#jingwei").val(result.geocodes[0].location);
    		 			    }else{
    		 			        //获取经纬度失败
    		 			    }
    		 			}); 
    			});
                     $(".locate span").html("已定位"); 
                }
            }
			
			function onError(data) {
				console.log(data)
			}
		});
	});
</script>
</html>